.run-button-component {

    display: inline-block;

    .JTable & {
        height: 24px;
    }

    .run-button, .stop-button {
        display: inline-block;
        cursor: pointer;
    }

    .run-button.btn-secondary .svg-icon {
        display: inherit;
        vertical-align: middle;
    }

    // default (text) display
    .svg-icon {
        display: none;
    }

    // icon display
    &.icon-button {
        height: 24px;

        .run-button, .stop-button {
            width: 24px;
            height: 24px;
            background: transparent;
            border: 0;
            position: relative;

            .svg-icon {
                display: block;
                position: absolute;
                top: 0;
                left: 0;

                .ParametersRunButton & {
                    fill: rgba(53, 64, 82, 0.25);
                    
                    &:hover {
                        fill: #4a90e2;
                    }
                }

                .favorites-card-stack & {
                    fill: #ffffff;
                    
                    &:hover {
                        fill: #ffffff;
                    }
                }
            }
        }

        .stop-button {
            /* asset has different padding than material-icon asset used in .run-button: nudge it slightly */
            top: 2px;
            left: 2px;

            &.stopping {
                opacity: 0.4;
                cursor: auto;
            }
        }

        .button-label {
            display: none;
        }
    }

    .action-button-colors;
}
